<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>未名 | 随机密码生成器</title>
		<style>
			* {
			 margin: 0;
			 padding: 0;
			 user-select: none;
			 box-sizing: border-box;
			   }
			
			body {
			 background-color: #0581ca;
			 justify-content: center;
			 align-items: center;
			 display: flex;
			 min-height: 100vh;
			    }
			
			.box{
			 background-color: white;
			 padding-top: 30px;
			 padding: 30px;
			   }
			.box h2{
			   margin-bottom: 40px;
			   text-align: center;
			   font-size: 26px;
			   color: #015a96;
			   font-family: sans-serif;
			 }
			 input {
			   padding: 20px;
			   user-select: none;
			   height: 50px;
			   width: 400px;
			   border-radius: 6px;
			   border: none;
			   border: 2px solid rgb(13, 152, 245);
			   outline: none;
			   font-size: 22px;
			     }
			 input::placeholder{
			   font-size: 23px;
			   } 
			#button {
			  font-family: sans-serif;
			  font-size: 15px;
			  margin-top: 40px;
			  border: 2px solid rgb(20, 139, 250);
			  width: 155px;
			  height: 50px;
			  text-align: center;
			  background-color: #0c81ee;
			  display: flex;
			  color: rgb(255, 255, 255);
			  justify-content: center;
			  align-items: center;
			  cursor: pointer;
			  border-radius: 7px;
			     }
			 .btn2{
			   margin-left: 85px;
			 }
			 #button:hover {
			   color: white;
			   background-color: black;
			 }	   
		</style>
	</head>
	<body>	
		<div class="box">
		<h2>未名 | 随机密码生成器</h2>
		<input type="text" name="" placeholder="Create password" id="password" readonly>
		<table>
		   <th><div id="button" class="btn1"onclick="genPassword()">生成</div></th>
		   <th><a  id="button" class="btn2" onclick="copyPassword()">复制</a></th>
		</table>
		
		</div>
	</body>
	<script>
		var password=document.getElementById("password");
		    function genPassword() {
		   var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		   var passwordLength = 12;
		   var password = "";
		   for (var i = 0; i <= passwordLength; i++) {
		      var randomNumber = Math.floor(Math.random() * chars.length);
		      password += chars.substring(randomNumber, randomNumber +1);
		    }
		        document.getElementById("password").value = password;
		
		    }
		  function copyPassword() {
		  var copyText = document.getElementById("password");
		  copyText.select();
		  copyText.setSelectionRange(0, 999);
		  document.execCommand("copy");
		  }
	</script>
</html>
